
document.addEventListener('DOMContentLoaded', function() {
layui.use(['layer'], function(){
 const layer = layui.layer;
 
 // 存储所有商品数据（示例数据）
 const allBooks = [
     {
         id: 1,
         title: "当动物有了手机",
         image: "./img/tupian3.jpg",
         price: 15,
         condition: "八成新",
         age: "0-2岁",
         category: "知识启蒙类",
         format: "有声绘本",
         region: "国内地区",
         style: "卡通风格",
         length: "中篇绘本",
         binding: "精装"
     },
     
     {
         id: 2,
         title: "我妈妈",
         image: "./img/tupian4.jpg",
         price: 15,
         condition: "八成新",
         age: "3-4岁",
         category: "品德教育类",
         format: "纸质绘本",
         region: "日韩地区",
         style: "油画风格",
         length: "短篇绘本",
         binding: "平装"
     },
     {
         id: 3,
         title: "水果的大聚会",
         image: "./img/tupian6.jpg",
         price: 15,
         condition: "九成新",
         age: "0-2岁",
         category: "知识启蒙类",
         format: "纸质绘本",
         region: "国内地区",
         style: "卡通风格",
         length: "短篇绘本",
         binding: "平装"
     },
     {
         id: 4,
         title: "丑小鸭",
         image: "./img/tupian12.jpg",
         price: 15,
         condition: "九成新",
         age: "5-6岁",
         category: "知识启蒙类",
         format: "有声绘本",
         region: "国内地区",
         style: "水彩风格",
         length: "中篇绘本",
         binding: "精装"
     },
     {
         id: 5,
         title: "不挑食的小兔子",
         image: "./img/tupian20.jpg",
         price: 15,
         condition: "八成新",
         age: "3-4岁",
         category: "知识启蒙类",
         format: "电子绘本",
         region: "国内地区",
         style: "油画风格",
         length: "短篇绘本",
         binding: "平装"
     },
     {
         id: 6,
         title: "中国年",
         image: "./img/tupian60.jpg",
         price: 15,
         condition: "八成新",
         age: "5-6岁",
         category: "品德教育类",
         format: "有声绘本",
         region: "国内地区",
         style: "油画风格",
         length: "中篇绘本",
         binding: "立体"
     },
     {
         id: 7,
         title: "图书馆去旅行",
         image: "./img/tupian56.jpg",
         price: 15,
         condition: "七成新",
         age: "5-6岁",
         category: "知识启蒙类",
         format: "有声绘本",
         region: "欧美地区",
         style: "卡通风格",
         length: "长篇绘本",
         binding: "平装"
     },
     {
         id: 8,
         title: "折耳兔奇奇",
         image: "./img/tupian64.jpg",
         price: 15,
         condition: "七成新",
         age: "0-2岁",
         category: "品德教育类",
         format: "纸质绘本",
         region: "有声地区",
         style: "水彩风格",
         length: "长篇绘本",
         binding: "平装"
     },
     {
         id: 9,
         title: "三只小猪",
         image: "./img/tupian69.jpg",
         price: 15,
         condition: "八成新",
         age: "3-4岁",
         category: "品德教育类",
         format: "有声绘本",
         region: "国内地区",
         style: "卡通风格",
         length: "长篇绘本",
         binding: "平装"
     },
     {
         id: 10,
         title: "遇见古埃及人",
         image: "./img/tupian39.jpg",
         price: 15,
         condition: "八成新",
         age: "5-6岁",
         category: "语言表达类",
         format: "纸质绘本",
         region: "欧美地区",
         style: "水彩风格",
         length: "短篇绘本",
         binding: "平装"
     },
 
     // ... 更多商品数据
 ];

 // 获取所有筛选选项
 const filterOptions = document.querySelectorAll('.filter-option');
 
 // 存储当前筛选条件
 let currentFilters = {
     "主题分类": "全部",
     "受众年龄": "全部",
     "表现形式": "全部",
     "出版地区": "全部",
     "绘本风格": "全部",
     "故事篇幅": "全部",
     "新旧程度": "全部",
     "装帧形式": "全部"
 };

 // 为每个筛选选项添加点击事件
 filterOptions.forEach(option => {
     option.addEventListener('click', function() {
         // 获取筛选组和类型
         const filterGroup = this.closest('.filter-group');
         const filterType = filterGroup.querySelector('.filter-label').textContent.replace(':', '');
         
         // 更新选中状态
         filterGroup.querySelectorAll('.filter-option').forEach(opt => {
             opt.classList.remove('active');
         });
         this.classList.add('active');
         
         // 更新当前筛选条件
         currentFilters[filterType] = this.textContent;
         
         // 添加选中动画
         this.classList.add('option-selected');
         setTimeout(() => {
             this.classList.remove('option-selected');
         }, 300);

         // 应用筛选并更新显示
         applyFilters();
     });
 });

 // 应用筛选条件
 function applyFilters() {
     layer.load(2); // 显示加载动画

     setTimeout(() => {
         // 筛选商品
         const filteredBooks = allBooks.filter(book => {
             return Object.entries(currentFilters).every(([type, value]) => {
                 if (value === '全部') return true;
                 
                 switch(type) {
                     case '主题分类':
                         return book.category === value;
                     case '受众年龄':
                         return book.age === value;
                     case '表现形式':
                         return book.format === value;
                     case '出版地区':
                         return book.region === value;
                     case '绘本风格':
                         return book.style === value;
                     case '故事篇幅':
                         return book.length === value;
                     case '新旧程度':
                         return book.condition === value;
                     case '装帧形式':
                         return book.binding === value;
                     default:
                         return true;
                 }
             });
         });

         // 更新显示结果
         updateBookDisplay(filteredBooks);
         
         // 更新结果数量
         updateResultCount(filteredBooks.length);
         
         layer.closeAll('loading');
         layer.msg('筛选完成', {icon: 1});
     }, 500);
 }

 // 更新商品显示
 function updateBookDisplay(books) {
     const bookGrid = document.querySelector('.book-grid');
     bookGrid.style.opacity = '0';
     
     setTimeout(() => {
         // 清空现有内容
         bookGrid.innerHTML = '';
         
         // 添加筛选后的商品
         books.forEach(book => {
             const bookCard = createBookCard(book);
             bookGrid.appendChild(bookCard);
         });
         
         // 添加显示动画
         bookGrid.style.opacity = '1';
         
         // 重新绑定卡片事件
         bindBookCardEvents();
     }, 300);
 }

 // 创建商品卡片
 function createBookCard(book) {
     const card = document.createElement('div');
     card.className = 'book-card';
     card.innerHTML = `
         <div class="book-image">
             <img src="${book.image}" alt="${book.title}">
         </div>
         <div class="book-info">
             <h3 class="book-title">${book.title}</h3>
             <div class="book-meta">
                 <span>${book.condition}</span>
                 <span>${book.age}</span>
             </div>
             <div class="book-price">¥${book.price}</div>
         </div>
     `;
     return card;
 }

 // 更新结果数量
 function updateResultCount(count) {
     const countSpan = document.querySelector('.results-count span');
     countSpan.textContent = count;
 }

 // 修改bindBookCardEvents函数中的点击事件处理
 function bindBookCardEvents() {
     const bookCards = document.querySelectorAll('.book-card');
     bookCards.forEach((card, index) => {
         // 悬停效果保持不变
         card.addEventListener('mouseenter', function() {
             this.classList.add('hover');
         });
         
         card.addEventListener('mouseleave', function() {
             this.classList.remove('hover');
         });
         
         // 修改点击事件处理
         card.addEventListener('click', function() {
             const title = this.querySelector('.book-title').textContent;
             const bookData = allBooks[index]; // 获取对应的书籍数据
             // 使用layer.js显示加载提示
             layer.msg(`正在跳转到《${title}》详情页...`, {
                 icon: 16, // 加载图标
                 time: 1000, // 显示1秒
                 shade: [0.3, '#000'],
             }, function() {
                 // 将书籍数据存储到sessionStorage
                 sessionStorage.setItem('currentBook', JSON.stringify(bookData));
                 // 跳转到详情页
                 window.location.href = `detail.html?id=${bookData.id}&title=${encodeURIComponent(title)}`;
             });
         });
     });
}
 // 搜索功能
 const searchInput = document.querySelector('.search-input');
 const searchBtn = document.querySelector('.search-btn');

 searchBtn.addEventListener('click', handleSearch);
 searchInput.addEventListener('keypress', (e) => {
     if (e.key === 'Enter') handleSearch();
 });

 function handleSearch() {
     const keyword = searchInput.value.trim().toLowerCase();
     if (!keyword) {
         layer.msg('请输入搜索关键词', {icon: 2});
         return;
     }

     // 在筛选结果中搜索
     const searchResults = allBooks.filter(book => {
         return book.title.toLowerCase().includes(keyword) ||
                book.category.toLowerCase().includes(keyword);
     });

     updateBookDisplay(searchResults);
     updateResultCount(searchResults.length);
     layer.msg('搜索完成', {icon: 1});
 }

 // 初始化显示
 applyFilters();
});
});